<link rel="stylesheet" type="text/css" href="/static/manage/css/member/miniapp/detail_style.css?v=9" />
<!--<link rel="stylesheet" type="text/css" href="/static/manage/css/member/member_miniapp/renew/renew_ed.css?v=13"/>-->
<style>
    .layuimini-container {
        background-color: #f2f2f2;
    }
    .layui-col-space1{
        text-align: left;
    }
    .layui-breadcrumb a cite {
        color: #6e56ff;
        font-style: normal;
    }
    .layui-breadcrumb a:hover {
        color: #6e56ff!important;
    }


    .layuimini-main {
        position: relative;
        padding: 15px 15px 15px 15px;
        background-color: #ffffff;
        border: none;
    }

    .layui-breadcrumb {
        visibility: visible;
        line-height: 1;
        display: block;
        font-family: none;
    }

    .td-btn {
       cursor: pointer;
    }

    .td-btns {
        cursor: pointer;
    }

    .layui-tab-title li {
        font-size: 14px;
        font-weight: bold;
        width: 300px;
    }

    .layui-tab-brief>.layui-tab-title .layui-this {
        font-size: 14px;
        font-weight: bolder;
        color:  #6e56ff;

    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #6e56ff;
    }

    .color-box {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40px;
        background: black;
        width: 100px;
        height: 40px;
        text-align: center;
    }

    .layui-card-header{
        background-image: linear-gradient(45deg, #6e56ff, #68a2dc);
        color: #f3f0ea;
        font-weight: bolder;
        height: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }

    .layui-card-body {
        background-color: whitesmoke;
        font-weight: bolder;
        height: 50px;
        word-break: break-all;
        overflow-x: auto;
        cursor: pointer;
    }

    .checkModule {
        border-style: inset;
        border-color: #6a89e7;
    }




    .price-info {
        font-size: 14px;
        /*line-height: 70px;*/
    }

    .price-item {
        background-image: linear-gradient(45deg, #000000, #85888c); !important;
        height: 40px; !important;
        line-height: 40px; !important;
        font-size: 14px; !important;

    }
    .price-desc {
        height: auto;!important;
    }

    .price-content {
        color: red;
        font-weight: bolder;
    }

    .layui-table tr {
        /*height: 60px;*/
    }

    .layui-elem-quote {
        margin-bottom: 10px;
        padding: 15px;
        line-height: 22px;
        border-left: 5px solid #6e56ff;
        border-radius: 0 2px 2px 0;
        background-color: #f2f2f2;
        color: black;
        text-align: left;

    }

    .price-title {
        font-size: 16px;
    }

    .layui-elem-field legend {
        font-size: 14px;
    }

    .box .center-boxs .center-box .center-b-box {
        padding: 10px 10px 0px;
    }

    .img{
        margin-top: 20px;
    }

</style>
<div class="layuimini-container">
    <div class="layuimini-main">
    <div class="layui-row layui-col-space1">
    <div class="layui-col-md12">
        <br>
               <span class="layui-breadcrumb">
                 <a href="{$url_info.base}">{$url_info.base_name}</a>
                 <a><cite>应用详情</cite></a>
     </span>
        <hr class="layui-border-blue">
    </div>
    </div>
    </div>
    <div class="box">
        <div class="top-box">

            <div class="top-img">
                <img src="{$detail.logo_image}"
                     onerror="javascript:this.src='/uploads/image/20200610/0a6862121a7ff89566319b54ee30f615.png'"
                     alt="">
            </div>
            <div class="top-title">{$detail.title}</div>
            <ul class="top-user">
                <li>当前版本: <span>v{$version_info.version}版本</span></li>
                <li>更新时间: <span>{$detail.update_time | date="Y-m-d"}</span></li>
            </ul>
            <div class="top-money">
                价格区间:<div class="top-number">
                <span>¥</span>{$detail.min_price} <div>~</div>
                <span>¥</span>{$detail.max_price}
            </div>
            </div>
            <div class="top-span">
                <div class="top-s-text">适用环境:</div>
                {if(false !== strpos($detail['types'], 'mini_program'))}
                <div class="top-span-organ">微信小程序</div>
                {/if}
                {if(false !== strpos($detail['types'], 'app'))}
                <div class="top-span-organ">APP</div>
                {/if}
                {if(false !== strpos($detail['types'], 'h5'))}
                <div class="top-span-organ">h5</div>
                {/if}
                {if(false !== strpos($detail['types'], 'official'))}
                <div class="top-span-organ">微信公众号</div>
                {/if}
                {if(false !== strpos($detail['types'], 'system'))}
                <div class="top-span-organ">系统</div>
                {/if}
                {if(false !== strpos($detail['types'], 'tt_program'))}
                <div class="top-span-organ">头条小程序</div>
                {/if}

            </div>
        </div>
        <div class="center-boxs">
            <div class="center-box">
                <div class="center-t-box">
                    <img src="/static/manage/images/member/miniapp/detail/icon_info.png">
                    <div class="center-t-title">应用开通</div>
                </div>
                <div class="center-b-box layui-row">
                        <div class="layui-col-md8">
                            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <ul class="layui-tab-title">
                                    <!--<li class="layui-this">应用详情</li>-->
                                    <li class="layui-this">套餐购买</li>
                                    <li>扩展插件</li>

                                </ul>
                                <div class="layui-tab-content" >
                                    <div class="layui-tab-item layui-show">
<!--                                        <div class="renew-img">-->
<!--                                        <img src="/static/manage/images/member/member_miniapp/renew/renew.png"/>-->
<!--                                        <div class="renew-text">-->
<!--                                        续费金额将从余额扣除，如果余额不足，请及时充值，谢谢！-->
<!--                                        </div>-->
<!--                                        </div>-->

                                        <!--套餐选择-->
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"></label>
                                                <div class="layui-input-block">

                                                    <div style="padding: 10px;">
                                                        <div class="layui-row layui-col-space15" id = 'app_detail'>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label"> <div class="color-box">套餐选择</div></label>
                                                <div class="layui-input-block">

                                                    <div style="padding: 10px;">
                                                        <div class="layui-row layui-col-space15" id = 'module_list'>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"> <div class="color-box">开通时间</div></label>
                                                <div class="layui-input-block">
                                                    <div style="padding: 10px;">
                                                        <div class="layui-row layui-col-space15" id = 'price_list'>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-form-item settle-total">
                                                <label class="layui-form-label"><div class="color-box settle-total">金额合计</div></label>
                                                <div class="layui-input-block">
                                                    <div class="layui-row">
                                                        <div class="layui-col-md12" id="price-content">

                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </form>


                                    </div>
                                    <div class="layui-tab-item">
                                        {if($plugins)}
                                        <div >
                                            <br>
                                            <div class="color-box">插件功能</div>
                                            <div >

                                                <table class="layui-table" lay-skin="line">
                                                    <colgroup>
                                                        <col>
                                                        <col>
                                                        <col>
                                                        <col>
                                                    </colgroup>
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>插件名称</th>
                                                        <th>价格</th>
                                                        <th></th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody class="price-content" >
                                                    {foreach $plugins as $plugin_key=>$plugin_vo }
                                                    <tr>
                                                        <td >{$plugin_vo.id}</td>
                                                        <td >{$plugin_vo.title}</td>
                                                        <td >{$plugin_vo.price}</td>
                                                        <td ></td>
                                                        <td >

                                                            {if($hasBuy == 1)}

                                                            {if($plugin_vo.has_buy == 1)}
                                                            <button type="button" class="layui-btn layui-btn-primary">已购买</button>
                                                            {else}
                                                            <button class="layui-btn layui-btn-normal plugin-buy" data-id="{$plugin_vo.id}" data-app-id="{$detail.id}">去购买</button>
                                                            {/if}
                                                            {else}
                                                            <div style="color: red">（需要先去购买套餐）</div>
                                                            {/if}


                                                        </td>
                                                    </tr>
                                                    {/foreach}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                        {else}

                                        <blockquote class="layui-elem-quote layui-quote-nm">
                                            <div><i class="layui-icon layui-icon-close-fill"></i><span class="null-sty">（该应用暂无扩展插件...）</span></div>
                                        </blockquote>

                                        {/if}
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-col-md4">
                            <div class="img">
                                {if($detail.qrcode_image)}
                                <img src="{$detail.qrcode_image}" >
                                {else}
                                <div><i class="layui-icon layui-icon-close-fill"></i><span class="null-sty">（该应用暂无微信体验码...）</span></div>
                                {/if}
                            </div>
                            {if($detail.qrcode_image)}
                            <div class="img-title">上方微信扫码体验</div>
                            {/if}
                        </div>
                </div>
            </div>
        </div>
        <div class="img-boxs">
            <div class="img-box">
                <div class="img-t-box">
                    <img src="/static/manage/images/member/miniapp/detail/icon_img.png">
                    <div class="img-t-title">应用截图</div>
                </div>
                <div class="img-list">
                    {foreach :explode(',', $detail['style_images']) as $vo }
                    <div class="img">
                         <img src="{$vo}" >
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="text-boxs">
            <div class="text-box">
                <div class="text-t-box">
                    <img src="/static/manage/images/member/miniapp/detail/icon_desc.png">
                    <div class="text-t-title">应用介绍</div>
                </div>
                <div class="texts">{$detail.content | raw}</div>
            </div>
        </div>
    </div>
    <div class="rgba-bag">
        <div class="rgba-bag-img">
        </div>
    </div>
</div>

<script id="module_template" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="layui-col-md3 module-item {{item.check_style}}" data-id="{{item.id}}" data-index="{{index}}">
        <div class="layui-card">
            <div class="layui-card-header">{{item.name}}</div>
            <div class="layui-card-body">
                {{item.desc ? item.desc: '该套餐暂无描述'}}
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
<script id="price_template" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="layui-col-md3 price-it" data-id="{{item.id}}" data-index="{{index}}">
        <div class="layui-card">
            <div class="layui-card-header price-title">{{item.day}}天/<span class="price-info">{{item.price}}元【{{item.title}}】</span></div>
        </div>
    </div>
    {{#  }); }}
</script>
<script id="total_template" type="text/html">

    <table class="layui-table">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>套餐名</th>
            <th>购买天数</th>
            <th>价格</th>
            <th>支付方式</th>
        </tr>
        </thead>
        <tbody class="price-content" >
        <tr>
            <td>{{d.module_title}}</td>
            <td>{{d.title}}/{{d.day>0 ?d.day + '天' :'永久' }}</td>
            <td>{{d.price}}元</td>
            <td>余额支付(当前余额：{{d.my_price}})
                <button class="layui-btn layui-btn-primary layui-border-black go-recharge" type="button">去充值</button>
            </td>
        </tr>
        </tbody>
    </table>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend style="color: red">（注意：如果购买套餐与之前已购套餐一致，并还有剩余天数未用完，购买套餐将按续费处理。如果不一致，则之前购买的套餐会自动失效。）</legend>
    </fieldset>
    <div style="width: 100%; margin: 0;">

            {{# if(d.has_buy){ }}
        <button type="button" class="layui-btn layui-btn-fluid app-buy" data-id="{{d.module_id}}" data-type="{{d.module_type}}" data-price-id="{{d.id}}"  style="background-color:black;font-size: 20px;height: 50px;">
            （应付金额：{{d.price}}元）单击续费套餐
        </button>
            {{# } else { }}
        <button type="button" class="layui-btn layui-btn-fluid app-buy" data-id="{{d.module_id}}" data-type="{{d.module_type}}" data-price-id="{{d.id}}"  style="background-color:black;font-size: 20px;height: 50px;">
            （应付金额：{{d.price}}元）单击购买套餐
        </button>
            {{# } }}

    </div>



</script>
<script id="detail_template" type="text/html">
    {{#  if(d){ }}
    <div class="layui-col-md5">
        <div class="layui-card">
            <div class="layui-card-header price-item">应用开通情况</div>
            <div class="layui-card-body price-desc" >
                购买的套餐：{{d.module? d.module.name : '购买的套餐已下架'}} <br>
                最近一次购买时间：{{d.createtime_text}} <br>
                最近一次购买天数：{{d.valid_days>0 ?d.valid_days + '天' :'永久' }} <br>
                套餐到期时间（包含续费时长）：
                {{# if(d.valid_days>0){ }}
                {{d.expiretime_text}}
                {{# } else { }}
                永久有效
                {{# } }}
                 <br>
                剩余使用天数：{{d.ex_days}} <br>
            </div>
        </div>
    </div>
    {{#  } }}
</script>

<script>
    var app_id = {$detail.id};
</script>





